const HtmlWebpackPlugin = require("html-webpack-plugin")
const { DefinePlugin } = require('webpack')
const path = require("path")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const CopyWebpackPlugin = require('copy-webpack-plugin')

//当前测试 -> 如果使用vue-loader@15版本 需要自己添加vue-loader-plugin 插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development', //如果是production 默认会压缩
  // 'source-map' : 在调试过程中可以定位到源代码的中信息，产生一个单独的source-map文件，功能最完全，但会减慢打包速度 
  // 'eval-source-map': 使用eval打包源文件模块，直接在源文件中写入干净完整的source-map，不影响构建速度，
  // #sourceMappingURL=main.js.map 但影响执行速度和安全，建议开发环境中使用，生产阶段不要使用
  // eval - 是否使用eval执行模块代码
  // cheap - SourceMap 是否包含行信息
  // module - 是否能够得到Loader处理之前的源代码
  // 开发环境下推荐：cheap-module-source-map , 
  // 生产模式：none , hidden-source-map.
  devtool: false, //到底要不要生成source-map,以及以什么方式生成source-map
  entry: "./src/index.js", //入口文件  可相对路径
  resolve: {
    extensions: [".js", '.json', '.vue', '.ts', '.jsx'], //自动解析确定的扩展。（配置了之后就不用补全扩展名）
    alias: {
      "@": path.resolve(__dirname, 'src'), //别名
    }
  },
  output: { //打包输出的对象
    filename: "js/main.js",
    path: path.resolve(__dirname, "dist"), //输入必须采用绝对路径
    // assetModuleFilename: "img/[name].[hash:4][ext]" //全局设置
    publicPath: '/', //建议 output中的publicPath与 devserver中的publicPath设置为一样
  },
  target: "web", //webpack 提供了多种部署 target,默认为web; / node:webpack 将在类 Node.js 环境编译代码 
  devServer: {
    hot: true, //模块热替换，局部模块更新，不影响其他模块
    hotOnly: true, //这个也设置的话，如果编译报错，你再改成正确的，重新编译，浏览器不会刷新
    port: 7000,  //端口号
    open: false,  //打开浏览器
    compress: true, //开启资源压缩
    historyApiFallback: true, //当使用h5 history api，任意的404响应，都需要被替换为 index.html时，启用该配置
    proxy: {
      '/api': {
        target: "https://api.github.com",
        pathRewrite: { "^/api": "" },
        changeOrigin: true,
      }
    },
    publicPath: '/', //指定本地服务所在的目录
    contentBase: path.resolve(__dirname, 'public'), //打包之后的资源如果说依赖其他的资源，此时告知去哪找
    watchContentBase: true,
  },
  module: {
    rules: [
      // {
      //     test: /\.css$/, //一般是正则表达式，匹配需要处理的文件类型
      //     use: [{
      //         loader: 'css-loader',
      //         //options:
      //     }]
      // }, 
      // {
      //     test: /\.css$/, //一般是正则表达式，匹配需要处理的文件类型
      //     loader: 'css-loader'
      // },
      {
        test: /\.css$/, //一般是正则表达式，匹配需要处理的文件类型
        use: [ //执行顺序从右往左，从下往上
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              esModule: false
            }
          },
          'postcss-loader',
          // {
          //     loader: 'postcss-loader',
          //     options: {
          //         postcssOptions: {
          //             plugins: [
          //                 require('autoprefixer'), //使用添加浏览器兼容前缀插件
          //             ]
          //         }
          //     }
          // },
        ],
      }, {
        test: /\.less$/, //一般是正则表达式，匹配需要处理的文件类型
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2  //如果有内嵌的less文件
            }
          },
          'postcss-loader',
          'less-loader'
        ], //执行顺序从右往左，从下往上
      }, {
        test: /\.(jpg|png|svg|gif|jep?g)$/,

        // 01
        type: "asset",
        generator: {
          filename: "img/[name].[hash:4][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 40 * 1024
          }
        },

        // 02
        // type: 'asset/resource',
        // generator: {
        //     filename: "img/[name].[hash:4][ext]",
        // }

        // 03
        // use: {
        //     loader: 'url-loader',
        //     options: {
        //         name: 'img/[name].[hash:8].[ext]',
        //         limit: 40 * 1024
        //             //outputPath: 'img'
        //     }
        // },

        //04
        //type: 'asset/inline', //base64位图片展示

        //05
        // use: [{
        //     loader: 'file-loader',
        //     options: {
        //         esModule: false, //不转化为esModule
        //     }
        // }]
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: 'asset/resource', //资源拷贝
        generator: {
          filename: "font/[name].[hash:3][ext]",
        }
      }, {
        test: /\.js$/, //使用babel-loader以及相关插件 兼容es6 箭头函数 模块作用域
        exclude: /node_modules/, // node_modules 内的兼容,无需经过loader处理
        use: ["babel-loader"],
        // use: [{
        //     loader: "babel-loader",
        //     options: {
        //         // plugins: [
        //         //     '@babel/plugin-transform-arrow-functions',
        //         //     '@babel/plugin-transform-block-scoping',
        //         // ]

        //         // 使用预设
        //         presets: [
        //             "@babel/preset-env"
        //         ]
        //     }
        // }]
      },
      {
        test: /\.ts$/,
        use: ['babel-loader']  //['ts-loader'] 在开发阶段就可以暴露语法错误
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      },

    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "hello rays'77",
      template: './public/index.html'
    }),
    new DefinePlugin({ //自定义变量插件
      BASE_URL: '"./"',
    }),
    new CopyWebpackPlugin({ //拷贝文件的插件，例如public中的静态文件无需打包的
      patterns: [{
        from: 'public',
        globOptions: {
          ignore: ['**/index.html']
        }
      }]
    }),
    new VueLoaderPlugin()
  ]
}

/** 图片占位符
 * [ext] : 扩展名
 * [name] : 文件名
 * [hash] : 文件名
 * [contentHash]:
 * [hash：<length>] : 文件名：长度
 * [path]:
 */